<template>
  <div class="card h100">
    <div class="title">
      <span>生产</span>
    </div>
    <div class="content h100">
      <echarts
        :chart-data="totalFailureChartOptions"></echarts>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        systemData: [],
        totalNum: 0
      }
    },
    computed: {
      // 总故障
      totalFailureChartOptions() {
        return {
          color: ['#76e570', '#ff9f59', '#f7534c', '#DCDBE0'],
          hasData: true,
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'bottom',
            left: 'center'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: '搜索引擎' },
                { value: 735, name: '直接访问' },
                { value: 580, name: '邮件营销' },
                { value: 484, name: '联盟广告' },
                { value: 300, name: '视频广告' }
              ]
            }
          ]
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
    @import "./common.scss";
    .card{
      .title{
        display: flex;
        justify-content: space-between;
      }
      .btn-active{
        background: #0BB976;
        color: #fff;
      }
    }
    .content{
      padding: 0 10px;
      height: calc(100% - 100px);
    }
    .content-info{
      overflow: auto;
      height:30%;
      &>div{
        min-width: 150px;
        background: #F2F2F7;
        float: left;
        padding:8px 10px;
        @include border;
        margin-right: 20px;
        line-height: 30px;
        margin-bottom: 10px;
        &>b{
          color: #FF3A30;
        }
        &>p{
          color: #B4B4C8;
          margin: 0;
        }
      }
    }
    .conten-chart{
      margin: 15px 0 20px;
      // .chart-box{
      //   height: 180px;
      // }
    }
</style>
